import React from 'react'
import {Carousel, Tabs, Icon} from 'antd'
import Image1 from '../../assets/image/IMG_0679.JPG'
import Image2 from '../../assets/image/IMG_0689.JPG'
import Image3 from '../../assets/image/IMG_0697.JPG'
import Image4 from '../../assets/image/IMG_0707.JPG'
import Logo from '../../assets/image/logo.jpg'
import LEFT from '../../assets/image/zct.png'
import GZH from '../../assets/image/gzh.jpg'
import ContactUs from '../../assets/image/contactUs.jpg'
import './index.scss'

export const HomeContainer = () => {
    return (
        <div className='home-container-content'>
            <div className='carousel-container'>
                <Carousel
                    afterChange={(a, b, c) => {console.log(a, b, c);}}
                    effect="fade"
                    autoplay
                    dotPosition='bottom'>
                    <div className='carousel'>
                        <img src={Image1} alt=""/>
                    </div>
                    <div className='carousel'>
                        <img src={Image2} alt=""/>
                    </div >
                    <div className='carousel'>
                        <img src={Image3} alt=""/>
                    </div>
                    <div className='carousel'>
                        <img src={Image4} alt=""/>
                    </div>
                </Carousel>
            </div>
            <div className='products-container'>
                <div className='label-container'>
                    <div className='label-1'>
                        <div className='before'></div>
                        <h2 className='product-label-1'>卓越产品</h2>
                        <div className='after'></div>
                    </div>
                    <h2 className='product-label-2'>Forever Y&H NEW PRODUCTS</h2>
                </div>
                <div className='image-container'>
                    <img src={Image2} alt=""/>
                    <img src={Image3} alt=""/>
                    <img src={Image1} alt=""/>
                </div>

            </div>
            <div className='products-container'>
                <div className='label-container'>
                    <div className='label-1'>
                        <div className='before'></div>
                        <h2 className='product-label-1'>明星产品</h2>
                        <div className='after'></div>
                    </div>
                    <h2 className='product-label-2'>Forever Y&H FAVORITE</h2>
                </div>
                <div className='favorite-container'>
                    <img src={Logo} alt=""/>
                    <img src={Logo} alt=""/>
                    <img src={Logo} alt=""/>
                </div>

            </div>
            <div className='market-container'>
                <div className='market'></div>
                <div className='news-container'>
                    <div className='news-left'>
                        <h2 className='news-left-title'>中餐厅合作</h2>
                        <div className='news-left-content'>
                            <img src={LEFT} alt=""/>
                        </div>
                    </div>
                    <div className='news-right'>
                        <h2 className='news-right-title'>品牌新闻<span className='brand-news'>/BRAND NEWS</span></h2>
                        <div className='news-right-content'>
                            <div className='news-right-content-top'>
                                <div className='news-right-content-top-left'>
                                    <img src={Logo} alt=""/>
                                </div>
                                <div className='news-right-content-top-right'>
                                    <p className='news-right-content-top-right-content'>
                                        干燥、灼热、红肿、瘙痒、紧绷肌肤一不留神就被各种diss不敢化妆也不敢裸脸你的脸部皮肤还好吗？ 就像人有高矮胖瘦一般肌肤的健康状态也是参差不齐有人天生无痘无斑无敏也有人从小皮肤就...
                                    </p>
                                </div>
                            </div>
                            <div className='news-right-content-bottom'>
                                <ul>
                                    <li>
                                        <a href="" className='txt'>【悦新品】​呵护油痘肌，还原如初净透——奢悦净肌控油平衡套</a>
                                        <span className='time'>6.15</span>
                                    </li>
                                    <li>
                                        <a href="" className='txt'>【悦新品】​呵护油痘肌，还原如初净透——奢悦净肌控油平衡套</a>
                                        <span className='time'>6.15</span>
                                    </li>
                                    <li>
                                        <a href="" className='txt'>【悦新品】​呵护油痘肌，还原如初净透——奢悦净肌控油平衡套</a>
                                        <span className='time'>6.15</span>
                                    </li>
                                    <li>
                                        <a href="" className='txt'>【悦新品】​呵护油痘肌，还原如初净透——奢悦净肌控油平衡套</a>
                                        <span className='time'>6.15</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

const { TabPane } = Tabs;
export const CompanyContainer = () => {

    return (
        <div className='company-container'>
            <div className='company-container__header'>
                <img src={Image4} alt=""/>
            </div>
            <div className='company-container__body'>
                <div className='company-body__body-top_text'>
                    <div className='text1'>探索Forever Y&H</div>
                    <div className='text2'>EXPLORING Forever Y&H</div>
                </div>
                <div className='company-container__body__navi'>
                    <Tabs defaultActiveKey="1">
                        <TabPane
                            tab={
                                <span>
                                  <Icon type="apple" style={{fontSize: 50}}/>
                                  企业介绍
                                </span>
                            }
                            key="1"
                        >
                            <div className='text-content'>
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;奢悦高端美容护肤品牌源起广州，经过数年的技术研发、产品孕育、经验积累，2016年，广州奢悦生物科技有限公司成立。

                                秉承着“天然为奢、悦人悦己“的品牌理念，不断地去寻找、挑战、升级配方，研制开发出奢悦水光护肤、奢悦彩妆两大经典系列。一经上市，迅速引爆国内市场，深受广大女性喜爱。

                                2017年，奢悦（北京）生物科技有限公司成立，坐落于艺术氛围浓郁的798艺术区，结合现代多元文化和时尚观念，延续产品理念，主打轻奢主义，旨在还原、呵护女性之美，传递浪漫生活色彩。

                                奢悦始终坚持以健康护肤为己任，尽可能地减少护肤品在每个生产环节多余的化学添加，引领“深层补水”的护肤新潮流，致力于提供最优质温和、自然纯净的产品，给亚健康的肌肤带来熠采新生，令女性绽放自信从容的轻奢魅力。

                                作为护肤品牌的新锐力量，2016年，奢悦通过CCTV、江苏卫视、北京卫视、安徽卫视、东方卫视等电视、网络媒体和产品体验把自己介绍给女性朋友，让她们了解并爱上奢悦。2017年，奢悦独家冠名《非常静距离》，旨在从不同角度关注女性群体，传播自身品牌价值，汇聚万千女性，共享美丽之源。

                                奢悦励志打造国有品牌最高影响力，自创立以来，以出色的产品效果和优质的服务影响了整个美容护肤行业，为中国美注入了新的活力与生机。未来，奢悦愿以自身不懈的努力帮助全球女性实现美丽事业。
                                </p>
                            </div>
                        </TabPane>
                        <TabPane
                            tab={
                                <span>
                                  <Icon type="android" style={{fontSize: 50}} />
                                  品牌理念
                                </span>
                            }
                            key="2"
                        >
                            <div className='text-content'>
                                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 奢悦宛如一位迷人的现代东方女性，从天然意蕴中翩然而来，优美蕴藉又兼具西方时尚魅力。温和纯粹而不失典雅高贵，浪漫华美而又具备丰富内涵。

                                    奢悦，秉承“天然为奢、悦人悦己”的价值理念，崇尚自然护肤，甄选植物精粹，融合现代生物科技，淬炼自然养分，深入肌肤本源，给予肌肤饱满营养和水分感，带来健康、自然的护肤体验，让肌肤筑起由内而外的美丽。

                                    至奢者无价，一如空气、水、阳光和健康。奢悦相信，只有自然的生机能量才能带来长久的转变。

                                    奢悦品牌源起香港。在这座时尚的国际化大都市，90年代，欧美最潮流的美容护肤品牌盛行，奢悦研发团队励志要缔造出美丽而健康，自然而纯净的美容配方，让国有护肤品在如此激烈的角逐中占据一席之地。

                                    奢悦研发团队先后从瑞士、韩国、日本、意大利等国采购原料，进行大胆的革新和试验，摒弃化妆品中多余的化学成分，采用天然的绿色植物精华。数载经验的积累、加上刻苦的研发，“水光系列”产品终于宣告研发成功，并取名叫“奢悦”，代表标示为“S-yue”。

                                    奢悦始终坚持以健康护肤为己任，尽可能地减少护肤品在每个生产环节多余的化学添加，引领“深层补水”的护肤新潮流，致力于提供最优质温和、自然纯净的产品，给亚健康的肌肤带来熠采新生，令女性绽放自信从容的轻奢魅力。

                                    奢不是奢侈挥霍，是珍贵天然，富养肌肤。悦是在悦人、悦己之间，优美从容。
                                </p>
                            </div>

                        </TabPane>
                        <TabPane
                            tab={
                                <span>
                                  <Icon type="windows" style={{fontSize: 50}}/>
                                   销售网络
                                </span>
                            }
                            key="3"
                        >

                        </TabPane>
                    </Tabs>,
                </div>

            </div>
            <div className='people-introduce-container'>
                <div className='introduce-me'>
                    <div className='image'>
                        <img src={Image1} alt=""/>
                    </div>
                    <div className='content'>
                        <h3 className='name'>艾合麦提</h3>
                        <div className='intr'>
                            Marco Suarez has built design systems at InVision and Etsy. Now he guides companies through the process of designing and adopting their own design systems. He’s also one of the owners of Methodical Coffee, a cafe and roasting company in Greenville, SC.
                        </div>
                        <div>
                            <ul>
                                <li><strong>Currently listening to:</strong> Shadow Work by Mammal Hands</li>
                                <li><strong>Currently inspired by:</strong> Dieter Rams</li>
                                <li><strong>Cultural thing I’m lovin’:</strong> Third Plate by Dan Barber</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className='introduce-kaidi'>
                    <div className='content'>
                        <h3 className='name'>开迪尔也</h3>
                        <div className='intr'>
                            Marco Suarez has built design systems at InVision and Etsy. Now he guides companies through the process of designing and adopting their own design systems. He’s also one of the owners of Methodical Coffee, a cafe and roasting company in Greenville, SC.
                        </div>
                        <div>
                            <ul>
                                <li><strong>Currently listening to:</strong> Shadow Work by Mammal Hands</li>
                                <li><strong>Currently inspired by:</strong> Dieter Rams</li>
                                <li><strong>Cultural thing I’m lovin’:</strong> Third Plate by Dan Barber</li>
                            </ul>
                        </div>
                    </div>
                    <div className='image'>
                        <img src={Image2} alt=""/>
                    </div>

                </div>
                <div className='introduce-nafisa'>
                    <div className='image'>
                        <img src={Image3} alt=""/>
                    </div>
                    <div className='content'>
                        <h3 className='name'>娜菲萨</h3>
                        <div className='intr'>
                            Marco Suarez has built design systems at InVision and Etsy. Now he guides companies through the process of designing and adopting their own design systems. He’s also one of the owners of Methodical Coffee, a cafe and roasting company in Greenville, SC.
                        </div>
                        <div>
                            <ul>
                                <li><strong>Currently listening to:</strong> Shadow Work by Mammal Hands</li>
                                <li><strong>Currently inspired by:</strong> Dieter Rams</li>
                                <li><strong>Cultural thing I’m lovin’:</strong> Third Plate by Dan Barber</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
export const ProductContainer = () => {

    return (
        <div className='product-container'>
           <div className='product-container-header'>
               <img src={Image3} alt=""/>
           </div>
           <div className='product-container-body'>
               <div className='product-container-body-top'>
                   <div className='product-container-body-top-left'>
                       <div className='product-container-body-top-left-title'>
                           奢享自然精华 悦人悦己
                       </div>
                       <div className='product-container-body-top-left-middle'>
                           <div className='m1'></div>
                           <div className='m2'></div>
                           <div className='m3'></div>
                           <div className='m4'></div>
                       </div>
                       <div className='product-container-body-top-left-content'>
                           秉承着“天然为奢、悦人悦己“的品牌理念，不断地去寻找、挑战、升级配方，研制开发出奢悦水光、彩妆、护肤几大经典系列。一经上市，便得到了国内市场的广泛关注，深受广大女性喜爱和认可。
                       </div>
                   </div>
                   <div className='product-container-body-top-right'>
                       <img src={Image3} alt=""/>
                   </div>
               </div>
               <div className='product-container-body-bottom'>
                   <div className='product-body'>
                       <div className='top'>
                           <img src={Logo} alt=""/>
                       </div>
                       <img src={Image3} alt=""/>
                       <div className='classfication'>美白系列</div>
                       <div className='desc'>
                           <p>
                               合理改善并修护肌肤水屏障漏洞
                               <br/>专注补水+持续锁水，令肌肤
                               <br/>如朝露晶莹水嫩，水润丰盈。
                           </p>
                       </div>
                   </div>
                   <div className='product-body'>
                       <div className='top'>
                           <img src={Logo} alt=""/>
                       </div>
                       <img src={Image2} alt=""/>
                       <div className='classfication'>补水系列</div>
                       <div className='desc'>
                           <p>
                               合理改善并修护肌肤水屏障漏洞
                               <br/>专注补水+持续锁水，令肌肤
                               <br/>如朝露晶莹水嫩，水润丰盈。
                           </p>
                       </div>
                   </div>
                   <div className='product-body'>
                       <div className='top'>
                           <img src={Logo} alt=""/>
                       </div>
                       <img src={Image1} alt=""/>
                       <div className='classfication'>修护系列</div>
                       <div className='desc'>
                           <p>
                               合理改善并修护肌肤水屏障漏洞
                               <br/>专注补水+持续锁水，令肌肤
                               <br/>如朝露晶莹水嫩，水润丰盈。
                           </p>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    )
}

export const ContactUsContainer = () => {

    return (
        <div className='contact-us-container'>
            <div className='contact-us-container__top'>
                <img src={ContactUs} alt=""/>
            </div>
            <div className='contact-us-container__body'>
                <div className='contact-us-text'>
                    <div className='contact-us-text-zh'>联系我们</div>
                    <div className='contact-us-text-en'>CONTACT US</div>
                </div>
                <div className='contact-us-content'>
                    <div className='contact-us-content-company'>西安梦启成诚网络科技有限公司</div>
                    <div className='contact-us-content-body'>
                        <div className='contact-us-content-body__address'>
                            <div className='contact-us__icon'>
                                <Icon type='apple' style={{fontSize: 50}}/>
                            </div>
                            <div className='text-body'>
                                <div className='text-title'>公司地址</div>
                                <div className='text-context'>
                                    西安市曲江新区芙蓉西路曲江城市花园1期6栋1单元10301
                                </div>
                            </div>
                        </div>
                        <div className='contact-us-content-body__phone'>
                            <div className='contact-us__icon' style={{transform: 'rotate(452deg)'}}>
                                <Icon type='phone' style={{fontSize: 50}}/>
                            </div>
                            <div className='text-body'>
                                <div className='text-title'>联系热线</div>
                                <div className='text-context' style={{textAlign: 'center'}}>
                                    15029009469 <br/> 18202941461
                                </div>
                            </div>
                        </div>
                        <div className='contact-us-content-body__wechat'>
                            <div className='contact-us__icon'>
                                <Icon type='wechat' style={{fontSize: 50}}/>
                            </div>
                            <div className='text-body'>
                                <div className='text-title'>关注我们</div>
                                <div className='text-context'>
                                    <img src={GZH} alt=""/>
                                </div>
                            </div>
                        </div>
                        <div className='contact-us-content-body__email'>
                            <div className='contact-us__icon'>
                                <Icon type='mail' style={{fontSize: 50}}/>
                            </div>
                            <div className='text-body'>
                                <div className='text-title'>联系邮箱</div>
                                <div className='text-context'>
                                    ahmatjan74@126.com
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}


export const JoinUsContainer = () => {

    return (
        <div>
            Join container
        </div>
    )
}